<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, this is browser ui.</title>
</head>
<body>
<h2>UI - Cross Domain - Local Storage</h2>
<p>通过iFrame实现对http://localhost:9001的local storage跨域通信访问。</p>
<table border="1px solid">
    <tbody>
    <tr>
        <td>演示步骤</td>
        <td>说明</td>
    </tr>
    <tr>
        <td>步骤1</td>
        <td>输入要发送到iFrame的信息。</td>
    </tr>
    <tr>
        <td>步骤2</td>
        <td>点击发送消息按钮，则消息会发送到http://localhost:9001，并存储到这个域的local storage中。</td>
    </tr>
    <tr>
        <td>步骤3</td>
        <td>在浏览器中打开http://localhost:9001并按F12查看local storage信息。</td>
    </tr>
    <tr>
        <td>步骤4</td>
        <td>可以重复步骤2、3，发送更多消息到http://localhost:9001。</td>
    </tr>
    </tbody>
</table>

<br/>
<br/>

<iframe src="http://localhost:9001/demo.html" frameborder="1" style="width: 100%; height: 300px"></iframe>

<div>
    <div>输入信息：<input id="message" type="text" name="message"/></div>
    <div>
        <button id="btn_send_msg">请点击这里发送消息到iframe</button>
    </div>
</div>
<br/>
<div>
    <div>来自iFrame的回复</div>
    <ul id="result"></ul>
</div>

<ol>
    <li><a href="http://localhost:9001/index.html">用户服务-首页</a></li>
    <li><a href="/">Go UI Home</a></li>
</ol>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    // send a message to first iFrame window
    $("#btn_send_msg").click(function () {
        let msg = $("#message").val();
        window.frames[0].postMessage(msg, 'http://localhost:9001');
    });

    // listen for message from iFrame window
    window.addEventListener('message', function (msg) {
        console.log("收到来自iFrame的消息响应：");
        $("#result").append("<li>" + msg.data + "</li>");
    }, false);

</script>
</html>